<template>
    <div id="login2">
      <header>
        <i @click="goBack()"></i>
        <div>登录</div>
      </header>
      <div class="nav">
        <div class="active">
          <a class="">
            <b>密码登录</b>
          </a>
        </div>
        <div>
          <a class="">
            <b>验证码登录</b>
          </a>
        </div>
      </div>
      <div class="swiper-container swipe" id="outSwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <ul class="passLogin">
              <li>
                <a>
                  <img src="../../image/icon_phone.png" width="20" height="20" alt="">
                  <input type="text" placeholder="请输入手机号" v-model="phone" required @input="checkNum" />
                </a>
              </li>
              <li>
                <a>
                  <img src="../../image/icon_new_password.png" width="20" height="20" alt="">
                  <input type="password" placeholder="请输入密码" v-model="password" required @click="testPhone" />
                </a>
              </li>
              <li>
                <router-link to='/forgetPass' class='no-border'>
                  忘记密码
                </router-link>
              </li>
              <li style='clear: both;'>
                <a class="confirmBtn" @click="loginPass()">
                  登 录
                </a>
              </li>
  
            </ul>
          </div>
          <div class="swiper-slide">
            <ul class="codeLogin">
              <li>
                <a>
                  <img src="../../image/icon_phone.png" width="20" height="20" alt="">
                  <input type="text" placeholder="请输入手机号" v-model="tele" @input="checkNum" required />
                </a>
              </li>
              <li>
                <a>
                  <img src="../../image/icon_verification_code.png" width="20" height="20" alt="">
                  <input type="text" placeholder="请输入验证码" v-model="code" required @click="testPhone" />
                  <span @click='getCode()' v-show='!hasCode'>获取验证码</span>
                  <span v-show='hasCode'>重新获取{{count}}s</span>
                </a>
              </li>
              <li>
                <a class="confirmBtn" @click="loginCode">
                  登 录
                </a>
              </li>
  
            </ul>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          list: [],
          phone: '', //账密登录手机号
          tele: '', //验证码登录手机号
          password: '',
          code: '',
          hasCode: false, //是否有验证码 默认无 发送后一分钟内是true 然后false
          time_count: 60, //倒计时时间
          count: '', //60s倒计时
          timer: null, //计时器
        }
      },
      components: {
  
      },
      methods: {
        goBack() {
          this.$router.push({
            path: '/login1'
          })
        },
        //点击获取验证码
        getCode() {
          if (this.tele == "") {
            this.$utils._toast("手机号不能为空");
            return false;
          } else if (!/^1(3|4|5|7|8|9)\d{9}$/.test(this.tele)) {
            this.$utils._toast("手机号码有误，请重填");
            return false;
          } else { //手机号码有效
            if (!this.timer) {
              const obj = {
                phone: this.tele
              };
              this.$api.post(this.$api.baseURLSchool, "send_code/login", obj, r => {
                console.log(r);
                if (r.data.ret == 1) { //验证码发送成功后开始60s倒计时
                  this.count = this.time_count;
                  this.hasCode = true;
                  this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= this.time_count) {
                      this.count--;
                    } else {
                      this.hasCode = false;
                      clearInterval(this.timer);
                      this.timer = null;
                    }
                  }, 1000)
                }else if(r.data.ret == -1){
                                this.$utils._toast('获取验证码频繁，请稍后再试');
                            }
              }, err => {
                console.log(err);
              })
  
            }
  
          }
        },
        //校验手机号
        checkNum(e) {
          var value = e.target.value;
          e.target.value = value.replace(/[^\d]/g, '');
          this.phone = e.target.value;
        },
        testPhone() {
          if (this.phone == "") {
            this.$utils._toast("手机号不能为空");
            return false;
          } else if (!/^1(3|4|5|7|8|9)\d{9}$/.test(this.phone)) {
            this.$utils._toast("手机号码有误，请检查");
            console.log(typeof (this.phone));
            return false;
          }
        },
        //验证码登录
        loginCode() {
          if (this.tele && this.code) {
            var params = {
              tele: this.tele,
            };
          
            this.$api.post(this.$api.baseURLSchool, "login_phone/" + this.code, params, r => {
              if (r.data.ret == 1) {
                localStorage.setItem("loginMobile", r.data.info.id);
                localStorage.setItem("token", r.data.info.token);
                this.$router.push({
                  path: '/home'
                })
              } else if (r.data.ret == -1) {
                this.$utils._toast('验证码错误');
              }
            }, err => {
              console.log(err);
            })
          } else {
            this.$utils._toast("请检查是否填写完整");
          }
        },
        //账密登录
        loginPass() {
          if (this.phone && this.password) {
            var params = {
              id: this.phone,
              pass: this.password
            };
            this.$api.post(this.$api.baseURLSchool, "userlogin", params, r => {
              if (r.data.ret == 1) {
                localStorage.setItem("loginMobile", this.phone);
                localStorage.setItem("token", r.data.info.token);
                this.$router.push({
                  path: '/home'
                })
              } else {
                this.$utils._toast(r.data.info);
              }
            }, err => {
              console.log(err);
            })
          } else {
            this.$utils._toast("请检查是否填写完整");
          }
  
        }
      },
      created() {
  
      },
      mounted() {
        var mySwiper = new Swiper('#outSwiper', {
          onSlideChangeStart: function (swiper) {
            var index = swiper.activeIndex;
            $('.nav div').removeClass();
            $('.nav div').eq(index).addClass("active");
          }
        });
        $('.nav div').click(function () {
          mySwiper.slideTo($(this).index());
          $(this).addClass('active').siblings().removeClass();
        });
      }
    }
  
  </script>
  <style lang="scss">
  </style>
  